<template>
  <view class="container">
    <view
      class="indexbg"
      :style="{
        background: 'url(' + $util.img('/image/huaImg/1.png') + ')',
        'background-size': '100% 100%',
      }"
      lazy-load
    ></view>
    <!-- 顶部导航 -->
    <view
      class="fixHeader flex-y-center"
      :style="{ paddingTop: StatusBar + 'px' }"
    >
      <view class="info">
        <view class="">
          <view class="font-30 font-weight-8" style="color: #172140"
            >社区{{ isShow == 1 ? "资讯" : "" }}</view
          >
          <view class="font-20 font-weight-5" style="color: #788096"
            >实用指南，生活锦囊</view
          >
        </view>
      </view>
    </view>
    <view
      class="zxClass"
      :style="{
        background: 'url(' + $util.img('/image/huaImg/2.png') + ')',
      }"
    >
      <view class="tit">
        <text class="font-weight-8">{{ isShow == 1 ? "资讯" : "" }}类别</text>
        <text class="font-24 m-l-20"
          >{{ isShow == 1 ? "资讯" : "" }}分类全 信息一网揽</text
        >
      </view>
      <view class="flex-between">
        <view
          class="flex-center zxitem"
          @click="$util.redirectTo('/otherpages/community/activityList')"
        >
          <view class="">
            <view class="font-weight-8">社群活动</view>
            <view class="font-24" style="color: #788096">社群活动乐翻天</view>
          </view>
          <image
            :src="$util.img('/image/huaImg/3.png')"
            class="zxicon"
            mode=""
          ></image>
        </view>
        <view class="flex-center zxitem" @click="goTo()" v-if="isShow == 1">
          <view class="">
            <view class="font-weight-8">知识学习</view>
            <view class="font-24" style="color: #788096">知识学习趣满途</view>
          </view>
          <image
            :src="$util.img('/image/huaImg/4.png')"
            class="zxicon"
            mode=""
          ></image>
        </view>
      </view>
    </view>
    <!-- <image  :src="$util.img('/image/huaImg/5.png')" class="m-24 titimg" mode="widthFix" ></image> -->
    <view class="p-b-24 bgwhite">
      <u-tabs
        :scrollable="false"
        lineWidth="130rpx"
        lineColor="#FF8F33"
        :activeStyle="{
          color: '#FF8F33',
        }"
        :inactiveStyle="{
          color: '#788096',
        }"
        itemStyle="padding-left: 15px; padding-right: 15px;padding-bottom:16rpx; height: 62rpx;"
        :current="topCurrent"
        :list="list1"
        @click="topclick"
      ></u-tabs>
    </view>
    <block v-if="topCurrent == 0">
      <view
        class="newitem flex-center"
        v-for="(item, index) in list"
        :key="index"
        @click="goDetail(item)"
        v-if="list.length > 0"
      >
        <view class="newleft">
          <view class="n-tit">{{ item.title }}</view>
          <view class="flex-y-center p-l-24">
            <view class="font-24 c-a4 flex-y-center" style="width: 30%">
              <text class="iconfont m-r-4">&#xe614;</text>{{ item.comment_num }}
            </view>
            <view class="font-24 c-a4 flex-y-center">
              <text class="iconfont m-r-4">&#xe615;</text>{{ item.zan_num }}
            </view>
            <view class="n-time m-l-auto">{{ item.create_time_text }}</view>
          </view>
        </view>
        <image
          :src="$util.img(item.image)"
          class="newimg"
          mode="widthFix"
          lazy-load
        ></image>
      </view>
    </block>
    <block v-if="topCurrent == 1">
      <activity :activityList="activityList" :showPing="true"></activity>
    </block>
    <!-- <emptyData :width="empty.width" :height="empty.height" :text="empty.text" :icon="empty.icon" :marginTop="empty.marginTop" v-show="list.length == 0"></emptyData> -->
    <tabbar value="1" ref="diyTabbar"></tabbar>
    <!-- 登录 -->
    <!-- <login-pop ref="loginDialog"></login-pop> -->
  </view>
</template>

<script>
import activity from "../../components/activity/activity.vue";
import tabbar from "../../components/tabbar/tabbar.vue";
export default {
  components: {
    tabbar,
    activity,
  },
  data() {
    return {
      StatusBar: getApp().globalData.StatusBar,
      empty: {
        width: 135,
        height: 134,
        text: "暂无数据",
        icon: "/image/emptyAddress.png",
        marginTop: 100,
      },
      //分页数据
      list: [],
      page: 1,
      isShow: 1, // 0 不显示，1显示
      list1: [
        {
          name: "推荐资讯",
        },
        {
          name: "推荐活动",
        },
      ],
      topCurrent: 0,
      activityList: [],
    };
  },
  onLoad(e) {
    // if (!uni.getStorageSync('token')) this.$refs.loginDialog.open();
    uni.hideTabBar();
  },
  onShow() {
    this.$refs.diyTabbar.init();
    this.getStatus();
    this.page = 1;
    this.getList();
    this.getActivityList();
  },
  onReachBottom() {
    this.page++;
    this.getList();
  },
  methods: {
    goTo() {
      this.$util.redirectTo("/otherpages/community/zxList");
    },
    topclick(e) {
      if (e.index != this.topCurrent) {
        this.topCurrent = e.index;
      }
      if (this.topCurrent == 0) {
        this.page = 1;
        this.getList();
      } else {
        this.getActivityList();
      }
    },
    goDetail(item) {
      this.$util.redirectTo(
        "/otherpages/community/zxinfo?id=" + item.article_id
      );
    },

    getList() {
      this.$api.sendRequest({
        url: "/api/community/article",
        data: {
          page: this.page,
          page_size: 20,
          category_id: 0,
          recommend: 1,
        },
        success: (res) => {
          if (res.code == 0) {
            if (this.page == 1) this.list = [];
            this.list = [...this.list, ...res.data.list];
          }
        },
      });
    },
    // 获取推荐活动
    getActivityList() {
      this.$api.sendRequest({
        url: "/api/socialize/goodslist",
        data: {
          page: 1,
          page_size: 20,
          type: "",
          recommend: 1,
        },
        success: (res) => {
          if (res.code == 0) {
            this.activityList = res.data.list;

            // 循环数组，格式化开始时间和结束时间格式为08:00
            for (let i = 0; i < this.activityList.length; i++) {
              this.activityList[i].start_time = this.formatTime(
                this.activityList[i].start_time,
                "HH:mm"
              );
              this.activityList[i].end_time = this.formatTime(
                this.activityList[i].end_time,
                "HH:mm"
              );
            }

            // 如果商品图片存在且为多张的情况下，取第一张图片作为封面图，已逗号拆分字符串，第一张图片做为封面图
            for (let i = 0; i < this.activityList.length; i++) {
              if (this.activityList[i].goods_image) {
                var images = this.activityList[i].goods_image.split(",");
                this.activityList[i].goods_image = images[0];
              }
            }
          }
        },
      });
    },
    getStatus() {
      this.$api.sendRequest({
        url: "/api/site/isShow",
        data: {},
        success: (res) => {
          if (res.code == 0) {
            this.isShow = res.data; // 0 不显示，1显示
          }
        },
      });
    },
    formatTime(time) {
      //    time的格式是12:00:00
      return time.substring(0, 5);
    },
  },
};
</script>

<style lang="scss" scoped>
.indexbg {
  position: absolute;
  top: 0;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 316rpx;
}
.container {
  width: 750rpx;
  min-height: 100vh;
  background-color: #fff;
}
.fixHeader {
  position: relative;
  // top:0;
  z-index: 9;
  width: 100%;
  box-sizing: border-box;
  padding-left: 30rpx;
  .info {
    display: flex;
    align-items: center;
    image {
      width: 72rpx;
      height: 72rpx;
      margin-right: 12rpx;
    }
  }
}
.zxClass {
  position: relative;
  z-index: 5;
  margin: 40rpx 24rpx 24rpx;
  padding: 24rpx;
  background-size: 100% 100%;
  .tit {
    color: #fff;
    margin-bottom: 24rpx;
  }
  .zxitem {
    width: 315rpx;
    background: linear-gradient(180deg, #ffe7d3 0%, #fff 33.77%);
    border-radius: 20rpx;
    padding: 22rpx;
    box-sizing: border-box;
    .zxicon {
      width: 88rpx;
      height: 88rpx;
      margin-left: 14rpx;
    }
  }
}
.titimg {
  width: calc(750rpx - 48rpx);
  margin-top: 0;
}
.newitem {
  padding: 0 24rpx;
  margin-bottom: 24rpx;
  .newleft {
    flex: 2;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    .n-tit {
      width: 480rpx;
      text-overflow: -o-ellipsis-lastline;
      /* //溢出内容隐藏 */
      overflow: hidden;
      /* //文本溢出部分用省略号表示 */
      text-overflow: ellipsis;
      /* //特别显示模式 */
      display: -webkit-box;
      /* //行数 */
      -webkit-line-clamp: 2;
      line-clamp: 2;
      /* //盒子中内容竖直排列 */
      -webkit-box-orient: vertical;
    }
    .n-time {
      font-size: 24rpx;
      color: #bbbec9;
    }
  }
  .newimg {
    width: 206rpx;
    height: 206rpx;
    margin-left: 20rpx;
  }
}
</style>
